<template>
    <div class="smartTable">
        <div class="headBar">
          <div class="selsetBar">
            <span>每页展示</span>
            <select v-model="selectedPageNum" v-on:change="chooosePageNum(selectedPageNum)" class="chooseBar">
              <option v-for="pageNum in pageNumList" v-bind:value="pageNum.num">{{pageNum.num}}</option>
            </select>
            <span>条</span>
          </div>
          <div class="searchBar">
            <input type="text" v-model="searchKey"  placeholder="输入查找">
          </div>
        </div>
        <div class="tableBar">
          <table class="table table-bordered tcenter">
            <thead>
                <tr>
                  <th v-for="item in getMessage.colTitle">{{item}}</th>
                </tr>
            </thead>
            <tbody>
                <slot></slot>
            </tbody>
          </table>
        </div>
        <div class="footBar">
          <div class="count">
            <span>共计</span>{{total}}<span>条</span>
          </div>
          <div class="pagination">
              <ul>
                <li><span class="disabled"  v-if="disabled[0]">首页</span></li>
                <li><span class="disabled"  v-if="disabled[0]">上一页</span></li>
                <li><span @click="chooosePage(1)" v-if="!disabled[0]">首页</span></li>
                <li><span @click="chooosePage(currentPage-1)" v-if="!disabled[0]">上一页</span></li>
                <li><span v-if="showToggle[0]">...</span></li>
                <li v-for="page in pageList">
                   <span @click="chooosePage(page.num)" v-bind:class="{ 'active':page.clicked }">{{page.num}}</span>
                </li>
                <li><span v-if="showToggle[1]">...</span></li>
                <li><span @click="chooosePage(currentPage+1)" v-if="disabled[1]">下一页</span></li>
                <li><span @click="chooosePage(maxPage)" v-if="disabled[1]">末页</span></li>
                <li><span  class="disabled" v-if="!disabled[1]">下一页</span></li>
                <li><span  class="disabled" v-if="!disabled[1]">末页</span></li>
              </ul>
          </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      total: 0,
      searchKey: '',
      disabled: [],
      showToggle: [],
      pageNumList: [
        {num: 10},
        {num: 20},
        {num: 50}
      ],
      selectedPageNum: 10,
      pageList: [],
      currentPage: 1,
      maxPage: 0
    }
  },
  props: ['getMessage'],
  methods: {
    // 向父组件发送数据
    sendData (data) {
      this.$emit('receiveData', data)
    },
    // 选择页码
    chooosePage (currentPage) {
      this.currentPage = currentPage
      this.fetchData()
    },
    // 选择分页大小
    chooosePageNum (currentPageNum) {
      this.currentPage = 1
      this.fetchData()
    },
    doPagination (currentPage) {
      this.currentPage = currentPage
      // 判断左右翻页是否可用
      if (this.maxPage !== 1) {
        if (currentPage === 1) {
          this.disabled = [true, true]
        } else if (currentPage === this.maxPage) {
          this.disabled = [false, false]
        } else {
          this.disabled = [false, true]
        }
      } else {
        this.disabled = [true, false]
      }
      // 根据最大值页码判断页尾展示
      if (this.maxPage > 7) {
        if (currentPage <= 4) {
          this.showToggle = [false, true]
          this.pageList = this.printPageList(6, currentPage - 1, 1)
        } else if (currentPage > this.maxPage - 4) {
          this.showToggle = [true, false]
          this.pageList = this.printPageList(6, currentPage - this.maxPage + 5, this.maxPage - 5)
        } else {
          this.showToggle = [true, true]
          this.pageList = this.printPageList(5, 2, currentPage - 2)
        }
      } else {
        this.showToggle = [false, false]
        this.pageList = this.printPageList(this.maxPage, currentPage - 1, 1)
      }
    },
    // 生产页码
    printPageList (x, y, z) {
      let List = []
      for (let i = 0; i < x; i++) {
        List[i] = {}
        List[i]['num'] = i + z
        if (i === y) {
          List[i]['clicked'] = true
        } else {
          List[i]['clicked'] = false
        }
      }
      return List
    },
    // 查询信息
    fetchData () {
      let _this = this
      let query = {}
      query = _this.getMessage.query
      query.pageNum = _this.selectedPageNum
      query.searchKey = _this.searchKey
      query.page = _this.currentPage

      let requestHead = {
        'method': _this.getMessage.method,
        'url': _this.getMessage.url
      }
      if (_this.getMessage.method === 'POST') {
        requestHead.data = query
      }
      if (_this.getMessage.method === 'GET') {
        requestHead.params = query
      }
      axios(requestHead)
      .then((response) => {
        console.log(response)
        _this.total = response.data.data.pageInfo.total
        _this.sendData(response.data.data.list)     // 发送数据
        if (_this.total % _this.selectedPageNum > 0) {
          _this.maxPage = Math.ceil(_this.total / _this.selectedPageNum)
        } else {
          _this.maxPage = _this.total / _this.selectedPageNum
        }
        _this.doPagination(_this.currentPage)
      }, (err) => {
        console.log(err)
      })
    }
  },
  watch: {
    searchKey (val, oldval) {
      this.fetchData()
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.smartTable{
  font-family:'Times New Roman'
}
.tcenter th,td{
  text-align:center;
}
.headBar{
  margin-bottom:20px;
  font-size:14px;
  height:25px;
  position:relative;
}
.selsetBar{
  position:absolute;
  top:0;
  left:0;
}
.searchBar{
  position:absolute;
  top:0;
  right:0;
}
.searchBar input{
  border:1px solid #dddddd;
  width:200px;
  height:30px;  
  border-radius:3px;
}
.table{
  width: 100%;
  max-width: 100%;
  margin-bottom: 0px;
  border-collapse: collapse;
}
.chooseBar{
  width:50px;
  height:30px;
  border-radius:5px;
  margin-right:5px; 
}
.tableBar{
  margin-bottom:15px;
}
.table-bordered {
  border: 1px solid #ddd;
}
tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
.footBar{
  position:relative;
  height:30px;
}
.count{
  position:absolute;
  top:0;
  left:0;
  display: inline-block;
  font-size:14px;
}
.pagination{
  position:absolute;
  top:0;
  right:0;
  margin: 0;
  height:30px;
  display: inline-block;
  padding-left: 0;
}
.pagination ul{
  margin: 0px;
  padding:0px;
  list-style:none;
  display:flex;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th, 
.table-bordered > thead > tr > td, 
.table-bordered > tbody > tr > td {
    border: 1px solid #ddd
}
.pagination ul>li>span{
  float:left;
  width:50px;
  height:30px;
  text-align:center;
  line-height:30px;
  border:1px solid #dddddd;
  cursor:pointer;
}
.pagination>ul>li:last-child>span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination>ul>li:first-child>span{
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination ul>li>span:hover{
  background-color:#dddddd;
}
.active{
  background-color:#5db4e6;
}
.disabled{
  cursor:not-allowed !important;;
}
</style>
